<template>
  <div>
    <Upload
      ref="upload"
      action="https://upload-z2.qiniup.com"
      type="drag"
      :format="['jpg','jpeg','png']"
      :show-file-list="showFileList"
      :show-upload-list="true"
      :data="qiniuData"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <div style="padding: 40px 0;">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖拽上传2</p>
      </div>
    </Upload>

    <Table highlight-row :columns="columns" :data="data"></Table>

    <Button
      style="margin-top:10px"
      @click="clearAll"
      :disabled="data.length == 0"
      type="primary"
    >清空已上传图片</Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qiniuData: {
        token: "",
        key: ""
      },
      showFileList: false,
      columns: [
        { title: "展品名称", key: "name", align: "center" },
        {
          title: "展品图片",
          key: "img",
          align: "center",
          render: (h, params) => {
            return h("img", {
              style: {
                width: "100px",
                marginTop: "6px"
              },
              attrs: {
                src: this.prefix + params.row.newPic
              }
            });
          }
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: { type: "error" },
                  on: {
                    click: () => {
                      this.del(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: [],
      list: []
    };
  },
  props: {
    clear: Boolean,
    goodsList: Array
  },
  watch: {
    clear: function() {
      this.$refs.upload.clearFiles();
    },
    goodsList: function(data) {
      this.list = data;
      this.clearAll();
    }
  },
  mounted() {
    this.getFilePrefix();
    this.getAccessToken();
  },
  methods: {
    // 获取上传文件的前缀
    getFilePrefix() {
      this.$http(
        "/stage/file/getFilePrefix",
        {
          museumId: this.$store.state.museumId
        },
        "get",
        res => {
          if (res.data.code == 200) {
            this.qiniuData.key = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    // 获取上传文件token
    getAccessToken() {
      this.$http("/stage/file/getAccessToken", {}, "get", res => {
        if (res.data.code == 200) {
          this.qiniuData.token = res.data.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    // 上传验证
    beforeAvatarUpload(file) {
      this.getFilePrefix();
      this.getAccessToken();
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        this.$Message.error("上传图片大小不能超过 1MB!");
      }
      return isLt2M;
    },
    // 上传完毕
    handleAvatarSuccess(res, file) {
      let name = file.name.split(".")[0],
        have = false,
        num = 0,
        that = this;
      for (let i = 0; i < this.list.length; i++) {
        if (name == this.list[i].id) {
          this.list[i].newPic = file.response.key;
          this.data.push(this.list[i]);
          have = true;
        }
        num++;
      }
      var time = setInterval(function() {
        if (num == that.list.length) {
          if (have) {
            that.$Message.success("上传成功");
            that.$emit("uploadImg", that.data);
          } else {
            that.$Message.error("失败，没有对应的数据");
          }
          clearInterval(time);
        }
      }, 0);
      this.$refs.upload.clearFiles();
    },
    // 删除
    del(params) {
      this.$http(
        "/stage/file/deleteFile",
        {
          fileName: params.row.newPic
        },
        "get",
        res => {
          if (res.data.code == 200) {
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
      this.data.splice(params.index, 1);
      this.$Message.success("删除图片成功");
      this.$emit("uploadImg", this.data);
    },
    // 清空已上传图片
    clearAll() {
      for (let i = 0; i < this.data.length; i++) {
        this.$http(
          "/stage/file/deleteFile",
          {
            fileName: this.data[i].newPic
          },
          "get",
          res => {
            if (res.data.code == 200) {
            } else {
              this.$Message.error(res.data.msg);
            }
          }
        );
      }
      this.data = [];
      this.$emit("uploadImg", this.data);
    }
  }
};
</script>